<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>法定假期基本信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<form class="layui-form" lay-filter="sysVacationDataForm">
    <div style="margin: 15px 315px;height: 55px;overflow: auto;">
        <div class="layui-form-item" style="display:none;">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id"  placeholder="请输入id"
                       autocomplete="off" class="layui-input " maxlength="50" fieldname="id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">假日名称<span style='color:red'>*</label>
            <div class="layui-input-block">
                <input type="text" id="sysVacationName" name="name"  placeholder="请输入假日名称"
                       autocomplete="off" class="layui-input " maxlength="50" fieldname="name" lay-verify="required">
            </div>
        </div>
    </div>

    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-xs6" style="margin: 0 auto; float:none;">
                <div id='calendar' ></div>
            </div>
        </div>
    </div>
        <div style="text-align: center;margin:20px 0;">
            <a lay-submit lay-filter="sysVacation" class="layui-btn btn-n">提交</a>
            <a style="margin-left: 10px;" class="layui-btn btn-n layui-btn-danger btn-save cancelAddedit">取消</a>
        </div>
</form>

<input type="hidden" id="viewType" value="">
<input type="hidden" id="calendarStart" value="">
<input type="hidden" id="calendarEnd" value="">

<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.css' rel='stylesheet' />
<link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script type="text/javascript" src="${ctx}/extends/fullcalendar-2.5.0/lib/jquery.min.js"></script>
<script src='${ctx}/extends/fullcalendar-2.5.0/lib/moment.min.js'></script>
<script src='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.js'></script>
<script type="text/javascript" src='${ctx}/extends/fullcalendar-2.5.0/lang/zh-cn.js'></script>
<script>
    //一般直接写在一个js文件中
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'setter','jquery','form', 'common','totalFilter','commons','layer'], function () {
        var table = layui.table;
        var setter = layui.setter;
        var form = layui.form;
        var common = layui.common;
        var commons = layui.commons;
        var $=layui.jquery;
        var layer = layui.layer;
        var totalFilter = layui.totalFilter;
        var calendarEl = document.getElementById('calendar');

        var dataId = "${dataId}";

        var sysVacations = [];

        $(".cancelAddedit").click(function () {
            $(this).attr("href", serverPath.systemPath+setter.sysLinkPath+"sysVacation/view/list");
        });

        $('#calendar').fullCalendar({
            locale: 'zh-cn',
            buttonText: {
                today: '今天',
                month: '月'
            },
            allDaySlot: true,//allday 整天的日程是否显示
//            allDayDefault:false,
            timeFormat: 'HH:mm',
            slotLabelFormat: {
                hour: 'numeric',
                hour12: false
            },
            scrollTime: '08:00:00',//当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
            firstDay: 1,
            defaultView: 'month',
            displayEventTime: false,
            displayEventEntTime: false,
            plugins: ['interaction', 'dayGrid', 'timeGrid'],
            //defaultDate: '2019-04-12',
            editable: true,
            selectable: false,
            nextDayThreshold : "00:00:00",
            eventLimit: true, // allow "more" link when too many events
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            allDaySlot: false,//allday 整天的日程是否显示
            slotLabelFormat:'HH:mm',//确定将在议程视图的垂直轴上显示的时间文本。
            slotDuration:'00:30:00',//在agenda的视图中, 两个时间之间的间隔(分钟)
            scrollTime :'08:00:00',//当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
            dayClick:function (date, jsEvent, view) {
                if($(this).attr('currentDayBackGround')==='1'){
                    $(this).css('background-color', 'transparent');
                    $(this).removeAttr('currentDayBackGround');
                    for (var i = 0; i < sysVacations.length; i++) {
                        if (new Date(sysVacations[i].startTime).valueOf() == new Date(date.valueOf()).valueOf()){
                            sysVacations.splice(i,1);
                        };
                    }
                }else{
                    $(this).css('background-color','red');
                    $(this).attr('currentDayBackGround','1');
                    var view = $('#calendar').fullCalendar('getView'); //获取当前视图对象
//                    var sysVacation = {"year":view.title.substring(0,4),"startTime":date.format(),"endTime":date.format()};
                    var sysVacation = {};
                    var currentDate = new Date(date.valueOf());
                    sysVacation.years = view.title.substring(0,4);
                    sysVacation.startTime = currentDate;
                    sysVacation.endTime = currentDate;
                    sysVacations.push(sysVacation);
                }
            },
            events: function(start,end,timezone,callback){
                var ent = [];
                $.ajax({
                    url:serverPath.basePath + setter.sysLinkPath + "sysVacation/get",
                    data:{"dataId":dataId},
                    type:"get",
                    contentType: 'application/json',
                    dataType: 'json',
                    success:function (data) {
                        var returnDate = data.data;
                        if(sysVacations.length != 0){
                            $("td[data-date]").each(function (index,item) {
                                for(var i = 0;i<sysVacations.length;i++){
                                    if($(this).attr('data-date')==commons.timeData(sysVacations[i].startTime)){
                                        $('.fc-bg').find(item).css('background-color','red')
                                        $(this).attr('currentDayBackGround','1');
                                    }
                                };
                            });
                        }else{
                            sysVacations = returnDate;
                            if(returnDate.length != 0){
                                $('#sysVacationName').val(returnDate[0].name);
                                $("td[data-date]").each(function (index,item) {
                                    for(var i = 0;i<returnDate.length;i++){
                                        if($(this).attr('data-date')==commons.timeData(returnDate[i].startTime)){
                                            $('.fc-bg').find(item).css('background-color','red')
                                            $(this).attr('currentDayBackGround','1');
                                        }
                                    };
                                })
                            }
                        }
                    }
                })
                callback(ent);
            }
        });

        var index = parent.layer.getFrameIndex(window.name);
        form.on("submit(sysVacation)",function (data) {
        	debugger;
            var sysVacationName = $('#sysVacationName').val();
            for(var i=0;i<sysVacations.length;i++){
                sysVacations[i].name = sysVacationName;
            }
            if(sysVacations.length==0){
            	layer.msg("请选择假期时间");
            }else{
            	$.ajax({
                    url:serverPath.basePath + setter.sysLinkPath + "sysVacation/save",
                    type:"post",
                    data:JSON.stringify(sysVacations),
                    dataType:'json',
                    contentType:"application/json;charset=utf-8",
                    success : function (data) {
                        if(commons._filterRecord(data)){
                            layer.alert(data.msg,function () {
                                location.href = serverPath.systemPath+setter.sysLinkPath+'sysVacation/view/list' ;
                                layer.close(index);
                            });
                        }else{
                            layer.msg(data.msg);
                        }
                        return false;
                    },
                    error : function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert("保存失败！" + XMLHttpRequest.status);
                    }
                })
            }
            
        })

    });
</script>
<style>
    .layui-layout-body {
        overflow: auto;
    }
    body{
        height:auto;
    }
</style>
</body>
</html>